<template>
  <div class="main-content">

    <!--添加章节-->
    <el-button type="text" @click="dialogFormVisible = true" size="normal">添加章节信息</el-button>
    <el-dialog title="章节信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="章节标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节序号" :label-width="formLabelWidth">
          <el-input-number :min="1" :max="255" v-model="form.sort"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmInfo">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加小节-->
    <el-dialog title="小节信息" :visible.sync="formChildVisible">
      <el-form :model="formVideo">
        <el-form-item label="小节标题" :label-width="formLabelWidth">
          <el-input v-model="formVideo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="小节序号" :label-width="formLabelWidth">
          <el-input-number :min="1" :max="255" v-model="formVideo.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="是否免费" :label-width="formLabelWidth">
          <el-radio-group v-model="formVideo.free">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频" :label-width="formLabelWidth">
          <el-upload
            action="http://localhost:8002/xiyun/vod/video/uploadVideo"
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :limit="1"
            class="upload-demo">
          <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end" style="margin-left: 10px">
              <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="formChildVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmVideoInfo">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 章节 -->
    <ul class="chnapterList">
    <li v-for="chapter in chapterVideoList" :key="chapter.id">
    <p>
      {{ chapter.title }}
      <span class="acts">
        <el-button type="text" @click="openVideoView(chapter.id)">添加小节</el-button>
        <el-button style="" type="text" @click="editChapter(chapter.id)">编辑</el-button>
        <el-button type="text" @click="delChapterInfo(chapter.id)">删除</el-button>
      </span>
    </p>
    <!-- 视频小节 -->
    <ul class="chnapterList videoList">
      <li v-for="video in chapter.children" :key="video.id">
        <p>
          {{ video.title }}
          <span class="acts">
            <el-button type="text" @click="editChapterVideo(video.id)">编辑</el-button>
            <el-button type="text" @click="delChapterVideoInfo(video.id)">删除</el-button>
          </span>
        </p>
      </li>
    </ul>
  </li>
  </ul>
  </div>
</template>

<script>
  import chapter from "../../../../../api/chapter";
  import video from "../../../../../api/video";
  export default {
    name: "One",
    beforeRouteLeave(to,from,next){
      // if (to.fullPath !== '/dashboard/subjectupload/2') {
      //   this.$confirm('该界面内容未保存, 是否离开?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     next()
      //   }).catch(() => {
      //     // console.log('取消')
      //   })
      // }
      this.$route.meta.success = true
      next()
    },
    mounted() {
      console.log('mouted')
      this.form.subjectId = this.$store.state.subjectId
      this.formVideo.subjectId = this.$store.state.subjectId
    },
    data(){
      return{
        chapterVideoList: [],
        dialogFormVisible: false, //章节弹窗
        formChildVisible: false,  //小节弹窗
        formVideoList: [],  //上传视频列表
        form: {
          id: '',
          subjectId: '',  //课程id
          title: '',  //章节标题
          sort: 1
        },
        formVideo: {  //小节表单
          id: '',
          subjectId: '',
          chapterId: '',
          title: '',
          sort: 1,
          free: 1,
          videoSourceId: '',
          videoOriginalName: ''
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
      //将后台获取到的课程id的值传入此函数,再去后台匹配该课程对应的章节内容
      getChapterVideos(){
        //  此为数据等待同步函数,当未获取到数据时进行等待
        if (!this.$store.state.subjectId){
          this.$msgbox.confirm("当前页面跑神了,请重试","提示",{
            showCancelButton: false,
            confirmButtonText: '确认'
          }).then(() => {
            this.$router.push({name: 'subjectList'})
          })
        }
        // console.log(this.$store.state.subjectId)

        chapter.getAllChapterVideo(this.$store.state.subjectId)
        .then(resp => {
          // console.log(resp.data.allChapterVideo)
          this.chapterVideoList = resp.data.allChapterVideo
        })
      },

      //just wait函数
      waitFunction(){
        setTimeout(() => {
          //just wait
        },200)
      },
//=============章节信息==================
      //确认章节信息
      confirmInfo(){
        if (this.form.id === ''){
          // console.log('addChapterInfo')
          this.addChapterInfo()
        }
        else{
          // console.log('updateChapterInfo')
          this.updateChapterInfo()
        }
      },

      //添加章节信息
      addChapterInfo(){
        this.dialogFormVisible = false
        chapter.addChapter(this.form)
        .then(() => {
          this.$message.success('添加成功')
          this.getChapterVideos()
          this.form.title = ''
          this.form.sort = 1
        })
      },
      //修改章节信息
      updateChapterInfo(){
        this.dialogFormVisible = false
        chapter.updateChapter(this.form)
        .then(() => {
          this.$message.success('修改成功')
          this.form.id = ''
          this.form.title = ''
          this.form.sort = 1
        })

      },

      //编辑章节信息
      editChapter(chapterId){
        // console.log(chapterId)
        this.dialogFormVisible = true
        chapter.getChapterInfo(chapterId)
        .then(resp => {
          // console.log(resp.data)
          this.form.title = resp.data.chapter.title
          this.form.sort = resp.data.chapter.sort
          this.form.id = chapterId
        })
      },

      //删除章节信息
      delChapterInfo(chapterId){
        chapter.delChapter(chapterId)
          .then(resp => {
            if (resp.code === 20000){
              this.$message.success('删除成功')
              this.getChapterVideos()
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
//=============小节信息==================
      //添加小节按钮
      openVideoView(chapterId){
        // console.log('chapterId = ' + chapterId)
        this.formChildVisible = true
        this.formVideo.chapterId = chapterId
      },

      //确认添加小节信息
      confirmVideoInfo(){
        if (this.formVideo.id === ''){
          this.addChapterVideoInfo()
        }else{
          this.updateChapterVideoInfo()
        }
      },

      //添加小节信息
      addChapterVideoInfo(){
        this.formChildVisible = false
        video.addChapterVideo(this.formVideo)
          .then(() => {
            this.$message.success('添加成功')
            this.getChapterVideos()
            this.formVideo.chapterId = ''
            this.formVideo.title = ''
            this.formVideo.sort  = 1
          })
      },

      //修改小节信息
      updateChapterVideoInfo(){
        this.formChildVisible = false
        video.updateChapterVideo(this.formVideo)
          .then(() => {
            this.$message.success('修改成功')
            this.getChapterVideos()
            this.formVideo.chapterId = ''
            this.formVideo.title = ''
            this.formVideo.sort  = 1
          })
      },

      //编辑小节信息
      editChapterVideo(videoId){
        this.formChildVisible = true
        video.getChapterVideoInfo(videoId)
          .then(resp => {
            // console.log(resp.data)
            this.formVideo.title = resp.data.chapterVideoInfo.title
            this.formVideo.sort = resp.data.chapterVideoInfo.sort
            this.formVideo.id = resp.data.chapterVideoInfo.id
            this.formVideo.chapterId = resp.data.chapterVideoInfo.chapterId
          })
      },

      //删除小节信息
      delChapterVideoInfo(videoId){
        video.delChapterVideo(videoId)
        .then(() => {
          this.$message.success('删除成功')
          this.getChapterVideos()
        })
      },
//==========添加小节视频==============
      //成功回调
      handleVodUploadSuccess(response, file, fileList) {
        this.formVideo.videoOriginalName = file.name
        this.formVideo.videoSourceId = response.data.videoId
      },
      //视图上传多于一个视频
      handleUploadExceed(files, fileList) {
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },
      handleVodRemove(){
        video.delAliVideo(this.formVideo.videoSourceId)
        .then(resp => {
          if (resp){
            this.$message.success('视频删除成功')
            this.formVideo.videoSourceId = ''
            this.formVideo.videoOriginalName = ''
          }else {
            this.$message.error('视频删除失败')
          }

        })
        .catch(err => {
          console.log(err)
        })

      },
      beforeVodRemove(file,fileList){
        return this.$confirm(`确定移除 ${ file.name }？`)
      }
    }
  }
</script>

<style scoped>
  .main-content{
    padding: 20px 36px;
    margin: auto;
  }
  .chnapterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .chnapterList li{
    position: relative;
  }
  .chnapterList p{
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }
  .chnapterList .acts {
    float: right;
    font-size: 14px;
  }
  .videoList{
    padding-left: 50px;
  }
  .videoList p{
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }
</style>
